import React from './react';

class Counter extends React.Component{
    constructor(props) {
        super(props);
        this.state = {odd: true};
    }
    componentWillMount() {
        
        // console.log('Count componentWillMount')
    }
    componentDidMount() {
        setTimeout(()=>{
            this.setState({odd: !this.state.odd})
        }, 1000)
        // console.log('Count componentDidMount')
        // setInterval(()=>{
        //     this.setState({
        //         number: this.state.number+1
        //     })
        // }, 1000)
    }
    shouldComponentUpdate(nextState, nextProps) {
        return true
    }
    componentDidUpdate() {
        // console.log('componentDidUpdate')
    }
    increment = () => {
        this.setState({
            number: this.state.number+1
        })
    }
    render() {
        // console.log('render')
        // let p = React.createElement('p', {style: {color: 'red'}}, this.props.name,this.state.number);
        // let button = React.createElement('button', {onClick: this.increment}, '+')
        // return React.createElement('div', {id: 'counter', style:{color: this.state.number%2 === 0?"red":"green"}}, p, button)
        // return this.state.number
        if(this.state.odd) {
            return React.createElement('ul', {id: 'old'}, 
                React.createElement('li', {key: 'A'}, 'A'),
                React.createElement('li', {key: 'B'}, 'B'),
                React.createElement('li', {key: 'C'}, 'C'),
                React.createElement('li', {key: 'D'}, 'D'),
            )
        }
        return React.createElement('ul', {id: 'new'}, 
            React.createElement('li', {key: 'A'}, 'A1'),
            React.createElement('li', {key: 'C'}, 'C1'),
            React.createElement('li', {key: 'B'}, 'B1'),
            React.createElement('li', {key: 'E'}, 'E1'),
            React.createElement('li', {key: 'F'}, 'F1'),
        )
    }
}

let element = React.createElement(Counter, {name: '计算器'})
React.render(element, document.getElementById('root'))